<template>

    <div class="find-box">

        <!-- 头部导航栏 -->
        <div class="headnav">
        <div class="nav-content" @click="search"><img src="../assets/search.png" alt="">  <span >新增“专业搜索”，筛作品超快！</span> </div>
        </div>

        <!-- 轮播图 -->
        <div class="main-box">
        <div class="banner-box">

            
            
            <van-swipe  class="my-swipe"  @change="onChange" :autoplay="3000" >
                <van-swipe-item v-for="(item,index) in banners" :key="index"> 
                    <img :src="item.cover" alt="">
                </van-swipe-item>
                
                <template #indicator>
                    <div class="custom-indicator"><span style="fontSize:20px">{{ current + 1 }}</span>/{{banners.length}}</div>
                </template>
        </van-swipe>
            
        </div>

        <!-- 推荐内容 -->
        <div class="recommend-box">
            <div class="recommend-content" v-for="(item,index) in recommend" :key="index" @click="goCreatores(index,item.title)">
                <div class="rec-icon"><img :src="item.icon" alt=""></div>
                <div class="rec-title">{{item.title}}</div>
            </div>
        </div>

        <!-- 作品 -->
        <div class="works-box" v-if="show">
            <div class="wr-title">
                <div class="wr-tip">作品</div>
               
            </div>


            <div class="wr-main">
                <div class="wr-content" v-for="(item,index) in categorie" :key="index" @click="goCategory(index,item.id)">
                    <div class="name">{{item.category_name}}</div>
                    <img :src="item.cover" alt="">
                    
                </div>
            </div>

            
        </div> 
    </div> 
       
    </div>
</template>

<script>

    import { Toast } from 'vant';


    export default {
        name:'Faxian',
        data(){
            return{
                current: 0,
                banners:[],
                recommend:[],
                categorie:[],
                show:false,
                

            }
        },

        components:{
        
            Toast,

        },

        created(){
            this.getFind();


        },
         activated(){
             this.getFind();
        },


        methods: {
            //搜索
            search(){
               this.$router.push({name:'search'})
            },
            onChange(index) {
            this.current = index;
            },

            getFind(){
                this.axios({

              
                // 请求类型
                method:'get',
                // 请求路径 详情内容
                 url:'https://apis.netstart.cn/xpc/page/discovery'

            }).then(result =>{
                this.banners=result.data.data.banners
                this.recommend = result.data.data.recommended_position
                this.categorie = result.data.data.categories
                
                this.show=true
                
            }).catch(err =>{
                 
            })
            },
           
             goCategory(index,id){
                
                this.$router.push({name: 'Categorie', query: {index,id}});
            },

            goCreatores(index,title){
                this.$router.push({name: 'Creatores', query: {index,title}});
                
            },


        },
    



    }
</script>

<style lang="less" >
    .find-box{
        
        // 头部导航
        .headnav{
            height: 46px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid rgb(216, 213, 213);


            .nav-content{
               display: flex;
               align-items: center;
                width: 90%;
                height: 30px;
                background-color: #e6e6e6;
               
                span{
                    color: rgb(174, 172, 172);
                }


                img{
                    display: block;
                    width: 14px;
                    height: 14px;
                    margin: 10px;
                }


            }


        }


        .main-box{
            height:calc(100vh - 50px);
            overflow: auto;
            position: relative;
       


               
        // 轮播图
        .banner-box{
            
           
       


             .my-swipe .van-swipe-item {
                 
                color: #fff;
                font-size: 20px;
                line-height: 150px;
                padding: 15px 10px;
                text-align: center;
               
                box-sizing: border-box;



                img{
                    display: block;
                    width: 100%;
                    
                    border-radius: 10px;
                }


            }


             .custom-indicator {
                position: absolute;
                width: 30px;
                text-align: justify;
                right: 10px;
                bottom: 20px;
                padding: 2px 5px;
                font-size: 14px;
                color: white;

            }

            


        }


        // 推荐
        .recommend-box{
            display: flex;
            padding: 30px;
            justify-content:space-between;
            
            .recommend-content{
              
                //    margin-right: 30px;
                   
                    

                .rec-icon{
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background-color: rgb(246, 242, 242);

                    img{
                        display: block;
                        width: 30px;
                        height: 30px;
                        position: relative;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                    }

                }

                .rec-title{
                    margin-top: 15px;
                    width: 50px;
                    text-align: center;
                }

            }





        }

        // 作品
        .works-box{

            padding: 0px 20px;

            .wr-title{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;


                .wr-tip{
                    font-size: 20px;
                    font-weight: bold;
                }

                .wr-all{
                    width: 50px;
                   color: red;
                }



            }

            .wr-main{
                margin-top: 20px;
                display: flex;
                flex-flow: wrap;
                justify-content: space-between;


                .wr-content{
                    position: relative;
                    
                    width: 46%;
                    
                    margin-bottom: 20px;

                    .name{
                        position: absolute;
                        color: white;
                        font-size: 16px;
                        top: 10px;
                        left: 10px;
                    }


                    img{
                        display: block;
                        width: 100% ;
                        border-radius: 5px;
                        height: 100%;
                    }
                    
                }

            }


        }

        }

    }




</style>